<template>
  <div class="app home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunbolist" :key="item.id">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        :icon="grid.src"
        v-for="grid in grids"
        :key="grid.id"
        :text="grid.title"
        :to="grid.to"
      />
    </van-grid>
  </div>
</template>
<script>
import { getLunbo, getGrid } from '../../api/home'
export default {
  data() {
    return {
      lunbolist: [],
      grids: []
    }
  },
  created() {
    this.getLunbo()
    this.getGrid()
  },
  methods: {
    async getLunbo() {
      const res = await getLunbo()
      console.log(res)
      this.lunbolist = res.data.message
    },
    async getGrid() {
      const res = await getGrid()
      this.grids = res.data.message
      console.log(res.data)
    }
  }
}
</script>
<style lang="scss">
//lang指定编译的语言
//scoped限定只有当前组件可用
// .home防止别人也会重名
.home {
  .my-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .van-grid-item__icon {
    font-size: 60px;
  }
}
</style>